<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="renderer" content="webkit" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="format-detection" content="telephone=no" />
		<title>原料清单</title>
		<link rel="stylesheet" href="../../../../res/layui/css/layui.css" />
		<link rel="stylesheet" href="../../../../res/css/common/font-awesome.min.css" media="all">
		<link rel="stylesheet" href="../../../../res/layui-config/css/app.css" media="all">
		<link rel="stylesheet" type="text/css" href="../../../../res/css/material-list/index.css" />
		<link rel="stylesheet" type="text/css" href="../../../../res/css/material-list/row.css" />
		<script src="../../../../res/js/common/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../../res/js/material-list/index.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../../res/js/common/parameter.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body class="childBody">
		<section class="layui-col-md10">
			<div class="layui-card">
				<div class="card-top css-transition kit-table">
					<form class="layui-form" lay-filter="kit-search-form">
						<!-- 左上角的两个按钮 -->
				        <div class="kit-table-header">
				        	<div class="kit-search-btns" style="height: 30px;line-height: 30px;margin-left: 10px;font-size: 16px">
				        		药品：<font style="color: #DC2D00;" id="pmcName">计划名称</font>
				            </div>
				            <div class="kit-search-inputs">
				                <div class="kit-search-keyword">
				                    <input type="text" class="layui-input" id="serach-one" placeholder="药材.." onKeyUp="lockInput(this,'serach-two')"/>
				                    <button lay-submit lay-filter="search1"><i class="layui-icon">&#xe615;</i></button>
				                </div>
				                <div class="kit-search-more" id="kit-search-more-one">更多筛选<i class="layui-icon">&#xe61a;</i></div>
				            </div>
				        </div>
				        <!-- 搜索扩展工具条 -->
				        <div class="kit-search-mored layui-anim layui-anim-upbit" id="kit-search-mored-one">
				            <div class="kit-search-body">
				                <div class="layui-form-item">
				                    <label class="layui-form-label">药品名称</label>
				                    <div class="layui-input-block">
				                        <input type="text" name="drugName" id="serach-two" placeholder="搜索关键字.." autocomplete="off" class="layui-input" onKeyUp="lockInput(this,'serach-one')">
				                    </div>
				                </div>
				                <div class="layui-form-item">
					                <label class="layui-form-label">类型</label>
					                <div class="layui-input-block">
					                    <select name="dtId" class="drug-type">
					                      <option value=""></option>
					                    </select>
					                </div>
				                </div>
				                <div class="layui-form-item">
				                    <div class="layui-inline">
				                        <label class="layui-form-label">范围</label>
				                        <div class="layui-input-block">
					                        <div class="layui-input-inline" style="width: 100px;">
					                            <input type="text" name="priceMin" placeholder="￥" autocomplete="off" class="layui-input" maxlength="6" onKeyUp="amount(this)">
					                        </div>
					                        <div class="layui-form-mid">-</div>
					                        <div class="layui-input-inline" style="width: 100px;">
					                            <input type="text" name="priceMax" placeholder="￥" autocomplete="off" class="layui-input" maxlength="6" onKeyUp="amount(this)">
					                        </div>
				                        </div>
				                    </div>
				                </div>
				            </div>
				            <div class="kit-search-footer">
				                <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary kit-btn reset-btn">重置</button>
				                <button lay-submit lay-filter="search1" class="layui-btn layui-btn-sm kit-btn">确定</button>
				            </div>
				        </div>
			        </form>
					<div class="layui-card-body">
						<div id="toolbar">
							<div class="layui-inline">
								<div class="layui-inline" style="margin-left: 5px;">总数量：<span style="color: #0000A0" id="allAmount">0</span></div>
						  	</div>
						</div>
						<div id="tableRes" class="table-overlay">
							<table id="dataTable1" lay-filter="dataTable1" class="layui-hide"></table>
						</div>
					</div>
				</div>
			</div>
		</section>
		<script src="../../../../res/layui/layui.all.js"></script>
		<script type="text/javascript">
			var pmcId = getParameter("id");
			$("#pmcName").text(getParameter("name"));
			//layui 模块化引用
			layui.use(['table', 'layer', 'element', 'jquery', 'form'], function(table, layer, element, $, form) {
				// data模式
				var $ = layui.$, table = layui.table, form = layui.form, layer = layui.layer;
				
				autoHeight();
				
				//数据表格实例化			
				var layTableId1 = "layTableId1";
				var tableIns1 = table.render({
					elem: '#dataTable1',
					id: layTableId1,
					url: "../../../../pmcDetails/findAll.action",
					where :{"pmcId":pmcId},
					height: 'full-140',
					page: true,
					cols: [
						[
							{title: '序号',type: 'numbers'},
							{field: 'drugName',title: '药品名称（name）'},
							{field: 'pdAmount',title: '数量（amount）',width: 200,sort: true},
							{field: 'drugUnit',title: '单位（unit）',width: 110,align: 'center'},
							{field: 'dtName',title: '类型',width: 90},
							{field: 'drugProp',title: '种类（type）',width: 120,align: 'center'}
						]
					],
					done: function(res, curr, count) {
						$("#allAmount").text(0);
						$("[data-field = 'pdAmount']").not(":first").each(function(){
							$("#allAmount").text(parseInt($("#allAmount").text())+parseInt($(this).text()));
					  	});
						
						$("[data-field = 'drugProp']").children().each(function(){
						    if($(this).text() == '1'){
						    	$(this).text("处方药");
						    } else if ($(this).text() == '0') {
						    	$(this).text("非处方药");
						    }
					  	});
					}
				});
				
				//点击排序重新渲染表格
		        table.on('sort(dataTable1)', function(obj){
		        	tableIns1.reload();
		        });
				
				$.ajax({ 
					url:"../../../../drugType/showList.action",
                    type:'post',//method请求方式，get或者post
                    async:false,//同步
                    dataType:'json',//预期服务器返回的数据类型
                    success:function(mes){//res为相应体,function为回调函数
                    	//循环添加类型搜索框内的数据
                    	$.each(mes.types,function(index,item){
                    		$(".drug-type").append("<option value="+item.dtId+">"+item.dtName+"</option>");
                    	});
                    	//渲染类型搜索框内的下拉框
                    	renderForm();
                    }
                 });
				
				//监听搜索表单提交
		        form.on('submit(search1)', function(data) {
		        	data.field["pmcId"]=pmcId;
		        	//带条件查询
		            tableIns1.reload({
		                where: data.field,
		                page: { curr: 1}
		            });
		            $('#kit-search-mored-one').hide();//关闭搜索层
		            return false;
		        });
				
		     	//表单渲染
		        form.render(null, 'kit-search-form');
				
		      	//更多筛选点击事件
		        $('#kit-search-more-one').on('click', function() {
		            $('#kit-search-mored-one').toggle();
		        });
			});
			//重新渲染表单
		  	function renderForm(){ 
	  			layui.use('form', function(){ 
		  			var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加() 
		  			form.render(); 
	  			}); 
	  		}
			//窗口自适应
			function autoHeight() {
				setHeight();
			    window.onresize = function() {
			    	setHeight();
				}
			}
			
			function setHeight() {
				var h = document.body.clientHeight && document.documentElement.clientHeight - 150; //窗口高度
			    $(".layui-card").height(h+120);
			}
			//ajax加载动画
		    $(function () {
	            $.ajaxSetup({
	                layerIndex:-1,
	                beforeSend: function () {
	                    this.layerIndex = layer.load(1, { shade: [0.8, '#ffffff'] });
	                },
	                complete: function () {
	                    layer.close(this.layerIndex);
	                },
	                error: function () {
	                    layer.alert('部分数据加载失败，可能会导致页面显示异常，请刷新后重试', {
	                        skin: 'layui-layer-molv'
	                       , closeBtn: 0
	                       , shift: 4 //动画类型
	                    });
	                }
	            });
	        });
		</script>
	</body>
</html>
